<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><!--版本要对-->
    <title>组件</title>

    <style>
      .main{clear:both;margin-top:20px}
      .catalog{ width:300px;float:left;text-align:center;background:grey;height:200px;line-height:200px}
      .product{width:70%;float:right}
    

    </style>
</head>

<body>
<div id="app">
    <app ></app>
</div>


</body>
<script>

    let catalog={
        data:function(){
          return {languages:['html','css','java','php','sqlserver','js','h5']}
        },
        template:"<div><slot :money='languages'>{{languages}}</slot></div>",
    }

    // let catalog2={
    //     data:function(){
    //       return {languages:['html','css','java','php','sqlserver','js','h5']}
    //     },
    //     template:"<ul><ol v-for='lang in languages'>{{lang}}</ol></ul>",
    // }

    let app={

        template:"<div><catalog><template slot-scope='langs'><ul ><ol v-for='item in langs.money'>{{item}}</ol></ul></template></catalog>"+
                  "</div>",
        // template:'<catalog></catalog>',
        components:{
         catalog,
         
        }
    }

    new Vue({
      el:"#app",
      data:{
         
      },
      //template:'<app  :data="catalogs" />',
      components:{
         app,
      }
    })




</script>

</html>